<script setup lang="ts">
import { computed, reactive } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import { pay_api } from "@/package/mall/api/pass_port_order";
import { EV_ORDER } from "@/constant/event";
import { requestPayment } from "@/utils/payment";
import { Router } from "@/utils/router";
import { Toast } from "@/utils/toast";

import OrderSettleBar from "./components/order-settle-bar.vue";

onLoad((options) => {
  infoData.cover_pic = decodeURIComponent(options?.cover_pic);
  infoData.product_name = decodeURIComponent(options?.product_name);
  infoData.price = options?.price;
  infoData.num = options?.num;
  tempData.id = options?.id;
});

const infoData = reactive({
  cover_pic: "",
  product_name: "",
  price: "",
  num: 1,
});

const payPrice = computed(() => {
  return (Number(infoData.price) * infoData.num).toFixed(2);
});

const payClick = () => {
  Toast.showLoading();
  pay_api({ order_id: tempData.id })
    .then((resp) => {
      Toast.hideLoading();
      requestPayment(
        resp,
        () => {
          uni.$emit(EV_ORDER, {
            type: "pay",
            data: { type: "goods", id: tempData.id },
          });
          Router.redirectTo("/package/my/pages/order/list");
        },
        () => {
          Router.redirectTo("/package/my/pages/order/list");
        }
      );
    })
    .catch(() => Toast.hideLoading());
};

const tempData = { id: "" };
</script>

<template>
  <view class="settle-product">
    <image
      class="settle-product-img"
      :src="infoData.cover_pic"
      mode="aspectFill"
    />
    <view class="settle-product-content">
      <view class="settle-product-name">{{ infoData.product_name }}</view>
      <!-- <view class="settle-product-price">￥{{ orderData.price }}</view> -->
    </view>
  </view>

  <view class="settle-order">
    <view class="settle-order-item">
      <view class="settle-order-label">产品单价</view>
      <view class="settle-order-value">￥{{ infoData.price }}</view>
    </view>
    <view class="settle-order-item">
      <view class="settle-order-label">购买数量</view>
      <view class="settle-order-value">x{{ infoData.num }}</view>
    </view>
  </view>

  <view class="settle-fixed">
    <OrderSettleBar title="合计" :price="payPrice" @btn-click="payClick" />
  </view>
</template>

<style lang="scss">
page {
  padding-top: 30rpx;
}

.settle-product {
  display: flex;
  align-items: flex-start;
  padding: 20rpx;
  margin: 0 30rpx 20rpx;
  border-radius: 20rpx;
  background-color: #ffffff;

  .settle-product-img {
    flex-shrink: 0;
    width: 200rpx;
    height: 150rpx;
    border-radius: 20rpx;
  }

  .settle-product-content {
    flex-grow: 1;
    min-width: 0;
    padding-top: 10rpx;
    margin-left: 20rpx;
  }

  .settle-product-name {
    height: 88rpx;
    font-size: 30rpx;
    color: #333333;
    line-height: 44rpx;
    font-weight: bold;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  // .settle-product-price {
  //   font-size: 32rpx;
  //   color: #666666;
  //   line-height: 36rpx;
  // }
}

.settle-order {
  margin: 0 30rpx 20rpx;
  border-radius: 20rpx;
  background-color: #ffffff;

  .settle-order-item {
    display: flex;
    align-items: center;
    height: 80rpx;
    padding: 0 30rpx;
  }

  .settle-order-label {
    flex-grow: 1;
    font-size: 28rpx;
    color: #333333;
  }

  .settle-order-value {
    font-size: 32rpx;
    color: #333333;
    font-weight: bold;
  }
}

.settle-fixed {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 104rpx;
  padding-top: 16rpx;
  padding-bottom: env(safe-area-inset-bottom);
  background-color: #ffffff;
}
</style>